<template>
    <div>
        <div class="container">
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in AdvertisementList" :key="item">
                    <h3 class="medium"></h3>
                    <img style="height: 100%;  width: 100%" :src="item" />
                </el-carousel-item>
            </el-carousel>
            <h1 style="margin-left: 30%">寄件</h1>
            <el-divider></el-divider>
              <el-form
                :model="sendPackage_form"
                v-loading="loading"
                :rules="rule_form"
                ref="sendPackage_form"
                style="margin-left: 30%"
                label-width="150px"
                class="send_express"
            >
                <el-form-item label="快递公司" prop="company_name">
                    <el-select v-model="sendPackage_form.company_name" placeholder="请选择快递">
                        <el-option v-for="item in express_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="发件人姓名" prop="from_name">
                    <el-input style="width: 200px" v-model="sendPackage_form.from_name"></el-input>
                </el-form-item>
                <el-form-item label="发件人电话" prop="from_tel">
                    <el-input style="width: 200px" v-model="sendPackage_form.from_tel"></el-input>
                </el-form-item>
                <el-form-item label="发件人地址（默认）" prop="from_address">
                    <el-input style="width: 350px" disabled v-model="sendPackage_form.from_address"
                        >河南省/平顶山市/新华区/龙翔大道河南城建学院理院</el-input
                    >
                </el-form-item>

                <el-form-item label="收件人姓名" prop="to_name">
                    <el-input style="width: 200px" v-model="sendPackage_form.to_name"></el-input>
                </el-form-item>
                <el-form-item label="收件人电话" prop="to_tel">
                    <el-input style="width: 200px" v-model="sendPackage_form.to_tel"></el-input>
                </el-form-item>
                <el-form-item label="收件人地址" prop="selectedTo_Options">
                    <el-cascader
                        size="large"
                        :options="sendPackage_form.options"
                        v-model="sendPackage_form.selectedTo_Options"
                        clearable
                        @change="handleChange2"
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="to_address_detail">
                    <el-input
                        style="width: 300px"
                        v-model="sendPackage_form.to_address_detail"
                        placeholder="XXX街道XX小区XX栋XX单元XX室"
                    ></el-input>
                </el-form-item>

                <el-form-item label="重量" prop="weight">
                    <el-input-number
                        v-model="sendPackage_form.weight"
                        @change="handleWeightChange"
                        :min="1"
                        :max="30"
                        label="重量(公斤)"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                   
                    <el-input v-model="sendPackage_form.price" disabled style="width: 180px;color:black;font-weight:600;">
                         <template slot="prepend">￥</template>
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('sendPackage_form')">提交</el-button>
                    <el-button @click="resetForm('sendPackage_form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
         
    </div>
</template>
<script>
import expressCompany_SF from '../../../assets/img/expressCompany_SF.jpg';
import expressCompany_JD from '../../../assets/img/expressCompany_JD.jpg';
import expressCompany_STO from '../../../assets/img/expressCompany_STO.jpg';
import expressCompany_YT from '../../../assets/img/expressCompany_YT.jpg';
import expressCompany_ZT from '../../../assets/img/expressCompany_ZT.jpg';
import expressCompany_EMS from '../../../assets/img/expressCompany_EMS.jpg';
import expressCompany_TT from '../../../assets/img/expressCompany_TT.jpg';
import { regionData, CodeToText } from 'element-china-area-data';
export default {
    // vue名字
    name: 'PackageStranded',
    // 数据
    data() {
        return {
            loading: false,
            tem_address1: '',
            tem_address2: '',
            //快递数组
            express_options: [
                {
                    value: '京东快递',
                    label: '京东快递'
                },
                {
                    value: '顺丰快递',
                    label: '顺丰快递'
                },
                {
                    value: '圆通快递',
                    label: '圆通快递'
                },
                {
                    value: '中通快递',
                    label: '中通快递'
                },
                {
                    value: '申通快递',
                    label: '申通快递'
                },
                {
                    value: '韵达快递',
                    label: '韵达快递'
                },
                {
                    value: '天天快递',
                    label: '天天快递'
                },
                {
                    value: 'EMS',
                    label: 'EMS'
                }
            ],
            sendPackage_form: {
                // from_address_detail: '',
                to_address_detail: '',
                options: regionData,
                selectedTo_Options: [],
                selectedFrom_Options: [],
                company_name: '',
                from_name: '',
                from_tel: '',
                from_address: '河南省/平顶山市/新华区/龙翔大道河南城建学院',
                to_name: '',
                to_tel: '',
                to_address: '',
                weight: 1,
                price: ''
            },
            //轮播图
            AdvertisementList: [
                expressCompany_JD,
                expressCompany_SF,
                expressCompany_TT,
                expressCompany_EMS,
                expressCompany_ZT,
                expressCompany_YT,
                expressCompany_STO
            ],
            rule_form: {
                from_address: [{ required: true, message: '请输入发件地址' }],
                to_address_detail: [{ required: true, message: '请输入收件人详细地址', trigger: 'blur' }],
                selectedOptions: [{ required: true, message: '请选择', trigger: 'change' }],
                company_name: [{ required: true, message: '请选择要使用的快递', trigger: 'change' }],
                from_name: [{ required: true, message: '请输入发件人姓名', trigger: 'blur' }],
                from_tel: [
                    { required: true, message: '请输入发件人电话', trigger: 'blur' },
                    { min: 8, max: 11, message: '请正确输入手机号', trigger: 'blur' }
                ],
                // selectedFrom_Options: [{ type: 'array', required: true, message: '请输发件人地址', trigger: 'blur' }],
                to_name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
                to_tel: [
                    { required: true, message: '请输入收件人电话', trigger: 'blur' },
                    { min: 8, max: 11, message: '请正确输入手机号', trigger: 'blur' }
                ],
                selectedTo_Options: [{ type: 'array', required: true, message: '请输收件人地址', trigger: 'blur' }],
                weight: [{ required: true, type: 'number', message: '数值必须为整数', trigger: 'blur' }],
                price: [{ required: true, message: '请计算价格', trigger: 'blur' }]
            }
        };
    },
    // 方法
    methods: {
        //计算邮费******
        //处理物品重量变化
        handleWeightChange(value) {
            console.log(value);
            console.log('计算邮费！');
            let param = new URLSearchParams();
            param.append('company_name', this.sendPackage_form.company_name);
            param.append('to_address', this.tem_address2);
            param.append('weight', this.sendPackage_form.weight);
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'express/expressCost',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.sendPackage_form.price = res.data.totalPrice;  
                    } 
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
       
        //处理选择的地址
        handleChange2(value) {
            if (value[1] != null && value[2] != null) {
                var dz = CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' + CodeToText[value[2]];
                this.tem_address2 = dz;
            } else {
                if (value[1] != null) {
                    dz = CodeToText[value[0]] + '/' + CodeToText[value[1]];
                    this.tem_address2 = dz;
                } else {
                    dz = CodeToText[value[0]];
                    this.tem_address2 = dz;
                }
            }
            console.log(this.tem_address2);
        },

        //提交表单数据
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.sendPackage_form.to_address = this.tem_address2 + '/' + this.sendPackage_form.to_address_detail;
                    const _this = this;
                    this.$axios({
                        method: 'POST',
                        url: 'express/addExpressInfo4',
                        data: JSON.stringify(this.sendPackage_form),
                        headers: { 'Content-Type': 'application/json' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.loading = false;
                                _this.$message({
                                    type: 'success',
                                    message: '提交成功！'
                                });
                            } else {
                                _this.loading = false;
                                _this.$message.err('提交失败！');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重置表单数据
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    // 页面初始化生命周期函数
    created() {}
};
</script>
// 样式
<style >
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.send_express label {
    color: black;
    font-weight: 600;
}
</style>